<template>
            <!-- 右侧表格内容 -->
            <div class="table_cont" v-loading="loading">
                <div class="crumbs">
                    <span>任务列表</span> >> <span>{{TapModuleName}}</span>
                </div>
                <!-- 表格按钮组 -->
                <div class="tabOpt">
                    <div class="taskcom_button" @click="mattersAttentionHandle">
                        <i class="btn_icon danger"></i>
                        <span>注意事项</span>
                    </div>
                    <div class="taskcom_button" @click="openModule">
                        <i class="btn_icon down"></i>
                        <span>模板导入</span>
                        <input id="uploadModule" type="file" ref="clearFile" @change="getFileModule($event)"  class="add-file-right-input" style="display:none;">
                    </div>
                    <div class="taskcom_button" @click="downloadModule">
                        <i class="btn_icon down"></i>
                        <span>下载模板</span>
                    </div>
                    <div class="active taskcom_button  float_right" @click="newAdd">
                        <i class="btn_icon add"></i>
                        <span>新增任务</span>
                    </div>
                </div>
                <!-- 表格 -->
                <div class="table">
                    <el-table
                    ref="multipleTable"
                    :data="tableData"
                    style="width: 100%"
                    >
                    <el-table-column
                    type="selection"
                    width="55">
                    </el-table-column>
                    <el-table-column
                    label="序号"
                    type="index"
                    width="55">
                    </el-table-column>
                    <el-table-column
                    prop="proName"
                    label="试验项目"
                    >
                    <template slot-scope="scope">
                       <el-input type="text" v-model="scope.row.proName" size="small" v-show="scope.row.edit"></el-input>
                       <span v-show="!scope.row.edit">{{scope.row.proName}}</span>
                   </template>
                    </el-table-column>
                    <el-table-column
                    prop="mediaId"
                    label="多媒体示范"
                    width="120">
                     <template slot-scope="scope">
                        <img class="sbimg" src="../../../assets/images/icon-up.png" alt="" @click="upimg(scope.$index, scope.row)">
                        <input :id="`uploadimg`+scope.$index" type="file" ref="clearFile" @change="getFileIMG($event,scope.row)"  class="add-file-right-input" style="display:none;">
                        <img v-if="!scope.row.mediaId" class="sbimg dis" src="../../../assets/images/icon-img-dis.png" alt="">
                        <img v-if="scope.row.mediaId" @click="openImg(scope.row)" class="sbimg" src="../../../assets/images/icon-img-act.png" alt="">
                    </template>
                    </el-table-column>
                    <el-table-column
                    prop="address"
                    label="开始测试"
                    width="120"
                    >
                    <template slot-scope="scope">
                        <el-button @click="edit(scope.row,'KSCS')" type="text" >设置</el-button>
                    </template>
                    </el-table-column>
                    
                    <el-table-column
                    prop="address"
                    label="操作"
                    align="center"
                    width="100"
                    >
                    <template slot-scope="scope">
                       <div class="flex">
                            <div class="table-edit" src="../../../assets/images/editIcon.png"  @click="editData(scope)"  v-show="!scope.row.edit" ></div>
                            <img style="cursor:pointer;" src="../../../assets/images/saveIcon.png"  @click="saveDatas(scope.row)"  v-show="scope.row.edit"  alt="">
                            <div class="table-delete" @click="deleteRow(scope.row)"></div>
                       </div>
                    </template>
                    </el-table-column>
                </el-table>
                </div>
                <matters-attention v-if="showMattersAtion" modelType="XTXN" @cancel="cancelMattersAtion"></matters-attention>
                 <check-object v-if="showCheckObj" :taskId="taskId" :billId="billId" :billName="billName" :modelType="modelType" :testType="testType" @cancel="cancelCheckObj"></check-object>
                <equipment-add v-if="showAddDIalog" modelType="XTXN" :taskId="$route.query.taskId" @cancel="cancelAddDialog"></equipment-add>
                <video-dialog v-if="videoDialog2" :src="videoSrc2" @close="videoDialog2=false"/>
            </div>
</template>
<script>
import { mapState } from 'vuex';
import Header from '@/components/Header'
import HeaderNav from '@/components/HeaderNav'
import leftTapside from '@/components/leftTapSide/index'
import equipmentAdd from '@/components/EquipmentAdd.vue'
import checkObject from '@/components/CheckObject.vue'
import mattersAttention from '@/components/MattersAttention.vue'
import videoDialog from '@/components/VideoDialog.vue'
import api from '@/api/taskApi'
export default {
     computed:{
         ...mapState({
             isTapModule:state =>state.TaskModule.isTapModule,
             TapModuleName:state =>state.TaskModule.TapModuleName,
         })
     },
    data(){
        return{
             tableData: [],
             showAddDIalog:false,//新增弹窗
             showMattersAtion:false,
             videoDialog2:false,
             videoSrc2:"",
             showCheckObj:false,
             loading:false,
             taskId: '',
             billId: '',
             billName: '',
             modelType: 'XTXN',
             testType: '',
             addArr:[],
        }
    },
    created(){
        this.taskId = Number(this.$route.query.taskId)
        this.getTaskList()
    },
    components:{
        leftTapside,Header,HeaderNav,equipmentAdd,mattersAttention,checkObject,videoDialog
    },
    methods:{
        editData(scope){
            this.tableData=this.tableData.splice(0);
            this.tableData.forEach((item,i)=>{
                if(scope.$index==i){
                    this.$set(this.tableData[i],"edit",true)
                    this.$forceUpdate()
                }else{
                    this.$set(this.tableData[i],"edit",false)
                    this.$forceUpdate()
                }
            })
        },
        saveDatas(row){
            console.log(row)
            let params={
                "list": [
                    {
                        "proName": row.proName,
                        "modelType":this.modelType,
                        "id": row.id,
                        "taskId": this.taskId
                    }
                ]
            }
            api.saveTaskOtherApi(params).then(res=>{
                if(+res.data.code==200){
                    row.edit=false;
                    this.getTaskList();
                    this.$message.success('修改成功');
                }else{
                    this.$message.error(res.data.msg||'修改失败');
                }
            }).catch(err=>{
                this.$message.error('修改失败');
            })
        },
        // 上传模板
        openModule(){
            document.getElementById('uploadModule').click()
        },
        getFileModule(event){
            console.log(event)
            console.log(event.target.files)
            var file = event.target.files;
            var fileName = file[0].name;
            var idx = fileName.lastIndexOf(".");  
            if (idx != -1){
                var ext = fileName.substr(idx+1).toUpperCase();   
                ext = ext.toLowerCase( ); 
                if (ext!='xlsx' && ext!='xls'&& ext!='csv'){
                    return  this.$message.warning('选择正确excel格式文件')
                }
                var formData = new FormData();
                formData.append('file',file[file.length-1]);
                formData.append('taskId',this.taskId);
                formData.append('modelType',this.modelType);
                this.loading=true;
                    api.uploadFileModule(formData).then(res=>{
                        this.loading=false;
                       if(+res.data.code==200){
                           this.getTaskList();
                           return this.$message.success('上传成功')
                       }else{
                           return this.$message.error(res.data.msg||'上传失败')
                       }
                    }).catch(err=>{
                        this.loading=false;
                        return this.$message.error('上传失败')
                    })
            }
        },
        downloadModule(){
            window.open(location.origin+'/static/file/性能测试__模板.xlsx')
        },
         // 注意事项
        mattersAttentionHandle() {
            this.showMattersAtion = true
        },
        cancelMattersAtion() {
            this.showMattersAtion = false
        },
        newAdd(){
            this.showAddDIalog=true;
        },
        cancelAddDialog(refresh) {
            if (refresh == 1) {
                this.getTaskList()
            }
            this.showAddDIalog = false
        },
        deleteRow(row){
            let params={
                "id": row.id
            }
            this.$confirm('确定删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    api.deleteRowOtherApi(params).then(res=>{
                        if(+res.data.code==200){
                            this.getTaskList();
                            return this.$message.success('删除成功');
                        }else{
                            return this.$message.error('删除失败');
                        }
                        console.log(res)
                    })
                }).catch(() => {});
            
        },
        getTaskList(){
            let params={
                pageNum:1,
                pageSize:99999,
                taskId:this.$route.query.taskId,
                modelType:'XTXN'
            }
            api.getTaskListOtherApi(params).then(res=>{
                console.log(res)
                if(+res.data.code==200){
                    res.data.data.list.forEach(item=>{
                        item.edit=false;
                    })
                    this.tableData=res.data.data.list
                }
            })
        },
        upimg(idx,row){
            console.log('uploadimg'+idx)
             document.getElementById('uploadimg'+idx).click()
        },
        openImg(row){
            if(row.mediaId.indexOf("png")>-1||row.mediaId.indexOf("jpg")>-1){
                this.$imageView([location.origin+'/bpapi/attach/download?attachId='+row.mediaId])
            }else if(row.mediaId.indexOf("mp4")>-1){
                this.videoDialog2=true;
                this.videoSrc2=location.origin+'/bpapi/attach/download?attachId='+row.mediaId;
            }else{
                this.$imageView([location.origin+'/bpapi/attach/download?attachId='+row.mediaId])
            }
        },
        getFileIMG(event,row){
            console.log(event)
            console.log(event.target.files)
            var file = event.target.files;
           for(var i = 0;i<file.length;i++){
            //    上传类型判断
                var fileName = file[i].name;
                var idx = fileName.lastIndexOf(".");  
                if (idx != -1){
                    var ext = fileName.substr(idx+1).toUpperCase();   
                    ext = ext.toLowerCase( ); 
                    if (ext!='png' && ext!='jpg' && ext!='mp4'&& ext!='jpeg'&&ext!='avi'&&ext!='mov'&&ext!='rmvb'&&ext!='rm'&&ext!='flv'&&ext!='3gp'){
                     return  this.$message.warning('选择图片或者视频')
                    }else{
                        this.addArr.push(file[i]);
                        console.log( this.addArr)
                    }
                     var formData = new FormData();
                    //  header参数 如果需要 自行配置
                    // formData.append('num', this.addType);
                    // formData.append('linkId',this.addId);
                    // formData.append('rfilename',this.addFileName);
                    // for(var i=0;i<this.addArr.length;i++){
                    //     formData.append('file',this.addArr[i]);
                    // }
                    formData.append('file',file[file.length-1]);
                    this.loading=true;
                    api.uploadFile(formData).then(res=>{
                        if(+res.data.code==200){
                            this.loading=false;
                            //上传成功后 调用接口保存
                            let params={
                                "list": [
                                    {
                                        "mediaId":res.data.data.attachId+"&mediaType="+ext,
                                        "id": row.id,
                                        "modelType":this.modelType,
                                        "taskId": this.taskId
                                    }
                                ]
                            }
                            api.saveTaskOtherApi(params).then(res=>{
                                if(res.data.code==200){
                                    this.getTaskList();
                                }else{
                                    this.$message.error(res.data.msg||'保存失败');
                                }
                            })
                            return  this.$message.success('上传成功')
                        }else{
                            this.loading=false;
                             return  this.$message.warning('上传失败')
                        }
                    }).catch(err=>{
                        this.loading=false;
                        return this.$message.error('上传失败')
                    })
                }else{

                }
            }
        },
        edit(row, type) {
            this.billId = row.id;
            this.billName = row.proName;
            this.testType = type;
            this.showCheckObj = true;
        },
        cancelCheckObj() {
            this.showCheckObj = false
        }
    }
}
</script>
<style lang="less" scoped>
@import url("./taskComm.less");
</style>
<style lang="less">
@import url("./commtable.less");
</style>